<template>
	<view class="container">
		<!-- 顶部总览卡片 -->
		<view class="overview-card">
			<!-- 背景装饰 -->
			<view class="bg-decoration">
				<view class="decoration-circle circle-1"></view>
				<view class="decoration-circle circle-2"></view>
				<view class="decoration-circle circle-3"></view>
			</view>
			
			<view class="overview-header">
				<view class="header-left">
					<view class="title-section">
						<text class="overview-title">工程款总览</text>
						<view class="title-underline"></view>
					</view>
					<view class="date-section">
						<text class="overview-subtitle">{{ currentMonth }}月{{ currentYear }}年</text>
						<view class="date-icon">📅</view>
					</view>
				</view>
				<view class="header-right">
					<view class="status-indicator">
						<view class="indicator-dot"></view>
						<text class="indicator-text">实时更新</text>
						<view class="indicator-arrow">→</view>
					</view>
				</view>
			</view>
			
			<view class="overview-stats">
				<view class="stat-item total-stat">
					<view class="stat-icon-wrapper">
						<view class="stat-icon total-icon">💰</view>
						<view class="icon-glow"></view>
					</view>
					<view class="stat-content">
						<text class="stat-number" :class="getNumberClass(totalAmount)" :title="`¥${totalAmount}`">¥{{ totalAmount }}</text>
						<text class="stat-label">总工程款</text>
						<view class="stat-trend">
							<text class="trend-text">总览</text>
						</view>
					</view>
				</view>
				<view class="stat-item unpaid-stat">
					<view class="stat-icon-wrapper">
						<view class="stat-icon unpaid-icon">⚠️</view>
						<view class="icon-glow"></view>
					</view>
					<view class="stat-content">
						<text class="stat-number" :class="getNumberClass(unpaidAmount)" :title="`¥${unpaidAmount}`">¥{{ unpaidAmount }}</text>
						<text class="stat-label">未结清</text>
						<view class="stat-trend">
							<text class="trend-text">待处理</text>
						</view>
					</view>
				</view>
				<view class="stat-item count-stat">
					<view class="stat-icon-wrapper">
						<view class="stat-icon count-icon">📊</view>
						<view class="icon-glow"></view>
					</view>
					<view class="stat-content">
						<text class="stat-number" :class="getNumberClass(projectCount.toString())" :title="projectCount.toString()">{{ projectCount }}</text>
						<text class="stat-label">工程数</text>
						<view class="stat-trend">
							<text class="trend-text">进行中</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 底部装饰 -->
			<view class="bottom-decoration">
				<view class="decoration-line"></view>
				<view class="decoration-dots">
					<view class="dot"></view>
					<view class="dot"></view>
					<view class="dot"></view>
				</view>
			</view>
		</view>

		<!-- 快速操作 -->
		<view class="quick-actions">
			<view class="action-btn primary-btn" @click="addProject">
				<view class="btn-icon-wrapper">
					<text class="action-icon">+</text>
					<view class="btn-glow"></view>
				</view>
				<text class="action-text">添加工程款</text>
				<view class="btn-arrow">→</view>
			</view>
		</view>

		<!-- 最近工程 -->
		<view class="recent-projects">
			<view class="section-header">
				<text class="section-title">最近工程</text>
				<text class="view-all" @click="goToProjects">查看全部</text>
			</view>
			<view class="projects-list">
				<view v-if="recentProjects.length === 0" class="empty-state">
					<text class="empty-text">暂无工程记录</text>
					<text class="empty-hint">点击上方按钮添加工程款</text>
				</view>
				<view v-else v-for="(project, index) in recentProjects" :key="index" class="project-item" @click="viewProject(project)">
					<view class="project-left">
						<view class="project-icon">
							<text class="icon-text">🏠</text>
						</view>
						<view class="project-info">
							<text class="project-title">{{ project.customer }}</text>
							<text class="project-room">{{ project.community }} - {{ project.room }}</text>
						</view>
					</view>
					<view class="project-right">
						<text class="project-amount">¥{{ project.totalAmount }}</text>
						<view class="project-status" :class="project.status">
							<text>{{ getStatusText(project.status) }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 快捷功能 -->
		<view class="quick-functions">
			<view class="function-item" @click="goToProjects">
				<view class="function-icon projects-icon">📋</view>
				<text class="function-text">工程记录</text>
			</view>
			<view class="function-item" @click="goToPayments">
				<view class="function-icon payments-icon">💰</view>
				<text class="function-text">付款记录</text>
			</view>
			<view class="function-item" @click="goToStatistics">
				<view class="function-icon stats-icon">📊</view>
				<text class="function-text">统计分析</text>
			</view>
			<view class="function-item" @click="goToCommunities">
				<view class="function-icon communities-icon">🏘️</view>
				<text class="function-text">小区管理</text>
			</view>
		</view>
	</view>
</template>

<script>
import { calculateUnpaidAmount } from '../../utils/calculations.js'

export default {
	data() {
		return {
			currentYear: new Date().getFullYear(),
			currentMonth: new Date().getMonth() + 1,
			projects: []
		}
	},
	computed: {
		totalAmount() {
			return this.projects.reduce((sum, project) => sum + project.totalAmount, 0).toFixed(2)
		},
		unpaidAmount() {
			return this.projects
				.reduce((sum, project) => sum + calculateUnpaidAmount(project), 0)
				.toFixed(2)
		},
		projectCount() {
			return this.projects.length
		},
		recentProjects() {
			return this.projects
				.sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
				.slice(0, 5)
		}
	},
	onLoad() {
		// 检查登录状态
		if (!this.checkAuth()) return
		this.loadProjects()
	},
	onShow() {
		this.loadProjects()
	},
	methods: {
		loadProjects() {
			const projects = uni.getStorageSync('engineering_projects') || []
			this.projects = projects
		},
		addProject() {
			uni.navigateTo({
				url: '/pages/add/add'
			})
		},
		viewProject(project) {
			uni.navigateTo({
				url: `/pages/project-detail/project-detail?id=${project.id}`
			})
		},
		goToProjects() {
			uni.switchTab({
				url: '/pages/projects/projects'
			})
		},
		goToStatistics() {
			uni.navigateTo({
				url: '/pages/statistics/statistics'
			})
		},
		goToCommunities() {
			uni.switchTab({
				url: '/pages/communities/communities'
			})
		},
		goToPayments() {
			uni.navigateTo({
				url: '/pages/payments/payments'
			})
		},
		getStatusText(status) {
			const statusMap = {
				'unpaid': '未付款',
				'partial': '部分付款',
				'paid': '已结清'
			}
			return statusMap[status] || '未知'
		},
		formatDate(dateString) {
			const date = new Date(dateString)
			const month = date.getMonth() + 1
			const day = date.getDate()
			return `${month}/${day}`
		},
		checkAuth() {
			const currentUser = uni.getStorageSync('currentUser')
			if (!currentUser) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
				return false
			}
			return true
		},
		getNumberClass(value) {
			const str = value.toString()
			if (str.length > 12) {
				return 'very-long-number'
			} else if (str.length > 8) {
				return 'long-number'
			}
			return ''
		}
	}
}
</script>

<style scoped>
.container {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.overview-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
	border-radius: 28rpx;
	padding: 40rpx;
	margin-bottom: 30rpx;
	color: white;
	box-shadow: 0 12rpx 40rpx rgba(102, 126, 234, 0.4);
	position: relative;
	overflow: hidden;
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

/* 背景装饰 */
.bg-decoration {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

.decoration-circle {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
	animation: float 8s ease-in-out infinite;
}

.circle-1 {
	width: 120rpx;
	height: 120rpx;
	top: -60rpx;
	right: -60rpx;
	animation-delay: 0s;
}

.circle-2 {
	width: 80rpx;
	height: 80rpx;
	bottom: -40rpx;
	left: -40rpx;
	animation-delay: 2s;
}

.circle-3 {
	width: 60rpx;
	height: 60rpx;
	top: 50%;
	right: 10%;
	animation-delay: 4s;
}

@keyframes float {
	0%, 100% { 
		transform: translateY(0px) rotate(0deg) scale(1); 
		opacity: 0.6;
	}
	50% { 
		transform: translateY(-30px) rotate(180deg) scale(1.1); 
		opacity: 0.8;
	}
}

.overview-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 50rpx;
	position: relative;
	z-index: 1;
}

.header-left {
	flex: 1;
}

.title-section {
	margin-bottom: 16rpx;
}

.overview-title {
	font-size: 40rpx;
	font-weight: bold;
	color: white;
	display: block;
	margin-bottom: 12rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.title-underline {
	width: 60rpx;
	height: 4rpx;
	background: linear-gradient(90deg, #fff, transparent);
	border-radius: 2rpx;
	animation: slideIn 1.5s ease-out;
}

@keyframes slideIn {
	from { width: 0; }
	to { width: 60rpx; }
}

.date-section {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

.overview-subtitle {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
}

.date-icon {
	font-size: 24rpx;
	opacity: 0.8;
}

.header-right {
	display: flex;
	align-items: center;
}

.status-indicator {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.15);
	padding: 12rpx 20rpx;
	border-radius: 25rpx;
	backdrop-filter: blur(15rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
	transition: all 0.3s ease;
}

.status-indicator:active {
	transform: scale(0.95);
	background: rgba(255, 255, 255, 0.25);
}

.indicator-dot {
	width: 10rpx;
	height: 10rpx;
	background: #4CAF50;
	border-radius: 50%;
	margin-right: 10rpx;
	animation: pulse 2s infinite;
	box-shadow: 0 0 10rpx rgba(76, 175, 80, 0.5);
}

@keyframes pulse {
	0% { 
		opacity: 1; 
		transform: scale(1);
	}
	50% { 
		opacity: 0.7; 
		transform: scale(1.2);
	}
	100% { 
		opacity: 1; 
		transform: scale(1);
	}
}

.indicator-text {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.95);
	font-weight: 500;
}

.indicator-arrow {
	font-size: 20rpx;
	margin-left: 8rpx;
	animation: slideRight 2s ease-in-out infinite;
}

@keyframes slideRight {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(4rpx); }
}

.overview-stats {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
	position: relative;
	z-index: 1;
	margin-bottom: 20rpx;
}

.stat-item {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 20rpx;
	padding: 20rpx 16rpx;
	backdrop-filter: blur(20rpx);
	border: 1rpx solid rgba(255, 255, 255, 0.25);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	min-height: 100rpx;
	width: 100%;
}

.stat-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.stat-item:active::before {
	opacity: 1;
}

.stat-item:active {
	transform: translateY(-2rpx);
	box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.2);
}

.stat-icon-wrapper {
	position: relative;
	margin-right: 16rpx;
	flex-shrink: 0;
}

.stat-icon {
	font-size: 32rpx;
	width: 48rpx;
	height: 48rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14rpx;
	position: relative;
	z-index: 2;
}

.icon-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	border-radius: 16rpx;
	background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
	animation: glow 3s ease-in-out infinite;
}

@keyframes glow {
	0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
	50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}

.total-icon {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.15));
}

.unpaid-icon {
	background: linear-gradient(135deg, rgba(255, 193, 7, 0.4), rgba(255, 193, 7, 0.2));
}

.count-icon {
	background: linear-gradient(135deg, rgba(76, 175, 80, 0.4), rgba(76, 175, 80, 0.2));
}

.stat-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.stat-number {
	font-size: 28rpx;
	font-weight: bold;
	color: white;
	display: block;
	margin-bottom: 6rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	word-break: break-all;
	line-height: 1.2;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 当数字太长时的自适应样式 */
.stat-number.long-number {
	font-size: 24rpx;
}

.stat-number.very-long-number {
	font-size: 20rpx;
}

/* 响应式优化 */
@media screen and (max-width: 750rpx) {
	.overview-stats {
		gap: 12rpx;
	}
	
	.stat-item {
		padding: 16rpx 12rpx;
		min-height: 90rpx;
	}
	
	.stat-icon {
		width: 40rpx;
		height: 40rpx;
		font-size: 28rpx;
	}
	
	.stat-number {
		font-size: 24rpx;
	}
	
	.stat-number.long-number {
		font-size: 20rpx;
	}
	
	.stat-number.very-long-number {
		font-size: 18rpx;
	}
	
	.stat-label {
		font-size: 20rpx;
	}
	
	.trend-text {
		font-size: 16rpx;
	}
}

.stat-label {
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
	margin-bottom: 6rpx;
	line-height: 1.2;
}

.stat-trend {
	display: inline-block;
	padding: 3rpx 10rpx;
	border-radius: 10rpx;
	background: rgba(255, 255, 255, 0.15);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.trend-text {
	font-size: 18rpx;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 400;
	line-height: 1.2;
}

/* 底部装饰 */
.bottom-decoration {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20rpx;
	position: relative;
	z-index: 1;
}

.decoration-line {
	height: 2rpx;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
	flex: 1;
	max-width: 200rpx;
}

.decoration-dots {
	display: flex;
	gap: 8rpx;
}

.dot {
	width: 6rpx;
	height: 6rpx;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	animation: dotPulse 2s ease-in-out infinite;
}

.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.3s; }
.dot:nth-child(3) { animation-delay: 0.6s; }

@keyframes dotPulse {
	0%, 100% { 
		opacity: 0.6; 
		transform: scale(1);
	}
	50% { 
		opacity: 1; 
		transform: scale(1.3);
	}
}

.month-selector {
	text-align: center;
	margin-bottom: 30rpx;
}

.month-text {
	font-size: 36rpx;
	font-weight: bold;
	margin-right: 10rpx;
}

.year-text {
	font-size: 28rpx;
	opacity: 0.8;
}

.balance-info {
	display: flex;
	justify-content: space-between;
}

.balance-item {
	text-align: center;
	flex: 1;
}

.balance-label {
	font-size: 24rpx;
	opacity: 0.8;
	display: block;
	margin-bottom: 10rpx;
}

.balance-amount {
	font-size: 32rpx;
	font-weight: bold;
	display: block;
}

.income {
	color: #4CAF50;
}

.expense {
	color: #F44336;
}

.quick-actions {
	display: flex;
	gap: 20rpx;
	margin-bottom: 30rpx;
}

.action-btn {
	flex: 1;
	height: 140rpx;
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.25);
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
	border: 1rpx solid rgba(255, 255, 255, 0.2);
}

.action-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.action-btn:active::before {
	opacity: 1;
}

.action-btn:active {
	transform: translateY(-2rpx);
	box-shadow: 0 12rpx 32rpx rgba(102, 126, 234, 0.4);
}

.btn-icon-wrapper {
	position: relative;
	margin-right: 16rpx;
}

.action-icon {
	font-size: 48rpx;
	font-weight: bold;
	position: relative;
	z-index: 2;
}

.btn-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
	animation: btnGlow 3s ease-in-out infinite;
}

@keyframes btnGlow {
	0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
	50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.2); }
}

.action-text {
	font-size: 30rpx;
	font-weight: 600;
	flex: 1;
	text-align: center;
}

.btn-arrow {
	font-size: 24rpx;
	margin-left: 12rpx;
	opacity: 0.8;
	animation: btnSlideRight 2s ease-in-out infinite;
}

@keyframes btnSlideRight {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(4rpx); }
}

.income-btn {
	background: linear-gradient(135deg, #4CAF50, #45a049);
	color: white;
}

.expense-btn {
	background: linear-gradient(135deg, #F44336, #d32f2f);
	color: white;
}

.recent-projects {
	background: white;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.view-all {
	font-size: 28rpx;
	color: #667eea;
}

.empty-state {
	text-align: center;
	padding: 60rpx 0;
}

.empty-text {
	font-size: 32rpx;
	color: #999;
	display: block;
	margin-bottom: 20rpx;
}

.empty-hint {
	font-size: 28rpx;
	color: #ccc;
}

.projects-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.project-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
	background: #f8f9fa;
	border-radius: 15rpx;
	transition: all 0.3s ease;
}

.project-item:active {
	background: #e9ecef;
	transform: scale(0.98);
}

.project-left {
	display: flex;
	align-items: center;
	flex: 1;
}

.project-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #667eea, #764ba2);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.icon-text {
	color: white;
	font-size: 32rpx;
}

.project-info {
	flex: 1;
}

.project-title {
	font-size: 30rpx;
	color: #333;
	font-weight: bold;
	display: block;
	margin-bottom: 8rpx;
}

.project-room {
	font-size: 24rpx;
	color: #666;
}

.project-right {
	text-align: right;
}

.project-amount {
	font-size: 32rpx;
	font-weight: bold;
	color: #667eea;
	display: block;
	margin-bottom: 8rpx;
}

.project-status {
	padding: 6rpx 12rpx;
	border-radius: 12rpx;
	font-size: 22rpx;
	color: white;
}

.project-status.unpaid {
	background: #ff4757;
}

.project-status.partial {
	background: #ffa502;
}

.project-status.paid {
	background: #2ed573;
}

.quick-functions {
	display: flex;
	justify-content: space-around;
	background: white;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-top: 30rpx;
}

.function-item {
	text-align: center;
	flex: 1;
}

.function-icon {
	font-size: 60rpx;
	margin-bottom: 15rpx;
}

.function-text {
	font-size: 26rpx;
	color: #666;
}
</style>

